<template>
    <div class="wrapperOrders">

        <header>
            <p>确认订单</p>
        </header>
    </div>
        <div class="order-info">
            <h1>订单配送至：</h1>
            <div class="order-info-address" @click="toUserAddress">
                <p>{{ deliveryaddress !=null ? deliveryaddress.address:'选择地址' }}</p>
                <i class="fa fa-angle-right"></i>
            </div>
          
        </div>
        <p class="user">{{ deliveryaddress.contactName }}{{ userSex }}{{ deliveryaddress.contactTel }}</p>
        <h1>{{ business.businessName }}</h1>

        <!-- 订单明细部分 -->

        <ul class="order-detailed">
            <li v-for="item in cartArr" v-bind:key="item.cartId">
                <div class="order-detailed-left">
                    <img :src="item.food.foodImg">
                    <div>
                    <p>{{ item.food.foodName }} X {{ item.quantity }}</p>
                    <p class="totalPrice"> &#165;{{ item.food.foodPrice * item.quantity }}</p>
                </div>
               </div>
            </li>
        </ul>
        <div class="order-deliveryfee">
            <p>配送费:</p>
            <p>&#165;{{ business.deliveryPrice }}</p>

        </div>
        <!-- 合计部分 -->
         <div class="total">
            <div class="total-left">
               总价： &#165;{{ totalPrice }}
            </div>
            <div class="total-right" @click="toPayment">
                去支付
            </div>
         </div>


</template>
<script>
export default{
    name:'Orders',
    data(){
        return{
            businessId:this.$route.query.businessId,
            business:{},
            user:{},
            cartArr:[],
            deliveryaddress:{}
        }
    },
    created(){
        this.user = this.$getSessionStorage('user');
        this.deliveryaddress =this.$getLocalStorage(this.user.userId);
      

        //查询当前商家
        this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
            businessId:this.businessId
        })).then(response =>{
            this.business = response.data;
        }).catch(error =>{
            console.error(error);
            
        });
        //查询当前用户在购物车中的当前商家食品列表
        this.$axios.post('CartController/ListCart',this.$qs.stringify({
            userId:this.user.userId,
            businessId:this.businessId
        })).then(response =>{
            this.cartArr =response.data;
        }).catch(error =>{
            console.error(error);
            
        });
    },
    computed:{
        totalPrice(){
            let totalPrice = 0;
            for(let cartItem of this.cartArr){
                totalPrice +=cartItem.food.foodPrice*cartItem.quantity;

            }
            totalPrice += this.business.deliveryPrice;
            return totalPrice;
        },
        userSex(){
            return this.deliveryaddress.contactSex==1?'先生':'女士';

        }
    },
    methods:{
			toUserAddress(){
				this.$router.push({path:'/userAddress',query:{businessId:this.businessId}});
			},
			toPayment(){
				if(this.deliveryaddress==null){
					alert('请选择送货地址！');
					return;
				}
				
				//创建订单
				this.$axios.post('OrdersController/createOrders',this.$qs.stringify({
					userId:this.user.userId,
					businessId:this.businessId,
					daId:this.deliveryaddress.daId,
					orderTotal:this.totalPrice
				})).then(response=>{
					let orderId = response.data;
					if(orderId>0){
						this.$router.push({path:'/PayPage',query:{orderId:orderId }});
					}else{
						alert('创建订单失败！');
					}
				}).catch(error=>{
					console.error(error);
				});
        }
    }
}
</script>
<style>
.wrapperOrders{
    width: 100%;
    height: 100px;
    font-size: 50px;
    background-color: #0097ff;
    color: white;
    text-align: center;
}
.order-info{
   display: flex;
}

.order-info-address{
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    width: 60%;
}
.order-detailed-left{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    margin-top: 20px;
}
.order-deliveryfee{
    display: flex;
    font-size: 30px;
    justify-content: center;
    
}
.total-left{
    font-size: 30px;
}
.total-right{
    font-size: 30px;
    background-color: #0097ff;
    width: 100px;
    margin-left: 45%;
    color: white;
    margin-top: 80px;
}
.user{
    text-align: left;
    font-size: 25px;
}
</style>